<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/regiest.css">
</head>

<body>
    <header class="container">
        <img src="./images/logobig.png" alt="">
    </header>
    <nav class="" style="text-align: center;">
        <img src="./images/tw6.jpg" style="margin-right: 190px;">
        <div class="lg">
            <ul class="nav nav-tabs">
                <li><a href="#name1" data-toggle="tab" style="color: black;font-weight:bold;border: 0px;">邮箱注册</a></li>
                <li style="float: right;"><a href="#name2" data-toggle="tab"
                        style="color: black;font-weight:bold;border: 0px;">手机号注册</a></li>
            </ul>
            <div class="tab-content">
                <form action="" class="tab-pane active fade in" id="name1">
                    <div class="input-group">
                        <span class="input-group-addon iconfont">&#xe68b;</span>
                        <input type="email" class="form-control youx" placeholder="请输入邮箱账号">
                        <span class="yx"></span>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon iconfont">&#xe638;</span>
                        <input type="password" class="form-control mim" placeholder="设置密码">
                        <span class="mm"></span>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon iconfont">&#xe638;</span>
                        <input type="password" class="form-control mim1" placeholder="确认密码">
                        <span class="mm2"></span>
                    </div>
                    <input type="checkbox" style="margin-bottom: 0px;float: left;" class="xy"><span
                        style="float: left;">点击表示您同意商城《服务协议》</span>
                    <input type="button" class="form-control btn btn-primary btn1" value="注册">
                </form>
                <form action="" class="tab-pane  fade in" id="name2">
                    <div class="input-group">
                        <span class="input-group-addon iconfont">&#xe6b9;</span>
                        <input type="text" class="form-control shouj" placeholder="请输入手机号码">
                        <span class="sj"></span>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon iconfont">&#xe638;</span>
                        <input type="password" class="form-control mi" placeholder="设置密码">
                        <span class="mm1"></span>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon iconfont">&#xe638;</span>
                        <input type="password" class="form-control mi1" placeholder="确认密码">
                        <span class="mm3"></span>
                    </div>
                    <input type="checkbox" style="margin-bottom: 0px;float: left;" class="xie"><span
                        style="float: left;">点击表示您同意商城《服务协议》</span>
                    <input type="button" class="form-control btn btn-primary btn2" value="注册">
                </form>
            </div>
        </div>
    </nav>
    <div class="footer">
        <p class="ft1">
            <a href="javascript:;">恒望科技</a>
            <a href="./index.html">商城首页</a>
            <a href="javascript:;">支付宝</a>
            <a href="javascript:;">物流</a>
        </p>
        <hr style="margin-top: 0px;">
        <p><a href="javascript:;">关于恒望 </a><a href="javascript:;"> 合作伙伴</a><a href="javascript:;"> 联系我们</a><a
                href="javascript:;"> 网站地图</a> ◎ 2015-2025
            Hengwang.com版权所有.更多模板模板在线厚朴网络淘宝店-Collect
            from模板在线厚朴网络淘宝店</p>
    </div>
</body>

</html>
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
    //2215028232@qq.com
    var reg = /^1[3-9]\d{9}$/;//手机号
    var reg1 = /^\w{1,11}@\w{1,}.com$/; //邮箱
    var reg2 = /^\w{2,8}$/; //用户名
    var reg3 = /^\w{6,18}$/; //密码
    $('.btn1').on('click', function () {
        if ($('.xy').prop('checked') == true) {
            if (reg1.test($('.youx').val())) {
                $('.yx').text('✔');
                $('.yx').css('color', 'green');
            } else {
                $('.yx').text('❌');
                $('.yx').css('color', 'red');
                $('.youx').val('')
            }
            if (reg3.test($('.mim').val())) {
                $('.mm').text('✔');
                $('.mm').css('color', 'green');
                if ($('.mim').val() === $('.mim1').val()) {
                    $('.mm2').text('✔');
                    $('.mm2').css('color', 'green');
                    alert('注册成功，前往首页登录')
                } else {
                    $('.mm2').text('❌');
                    $('.mm2').css('color', 'red');
                    $('.mim1').val('');
                }
            } else {
                $('.mm').text('❌');
                $('.mm').css('color', 'red');
                $('.mim').val('');
            }
        } else {
            alert('请勾选服务协议');
        }

    })
    $('.btn2').on('click', function () {
        if ($('.xie').prop('checked') == true) {
            if (reg.test($('.shouj').val())) {
                $('.sj').text('✔');
                $('.sj').css('color', 'green');
            } else {
                $('.sj').text('❌');
                $('.sj').css('color', 'red');
                $('.shouj').val('');
            }
            if (reg3.test($('.mi').val())) {
                $('.mm1').text('✔');
                $('.mm1').css('color', 'green');
                if ($('.mi').val() === $('.mi1').val()) {
                    $('.mm3').text('✔');
                    $('.mm3').css('color', 'green');
                    alert('注册成功，前往首页登录')
                } else {
                    $('.mm3').text('❌');
                    $('.mm3').css('color', 'red');
                    $('.mi1').val('');
                }
            } else {
                $('.mm1').text('❌');
                $('.mm1').css('color', 'red');
                $('.mi').val('');
            }
        } else {
            alert('请勾选服务协议');
        }

    })
</script>